<template>
  <div class="box">
    <div class="top">
      <van-search
        shape="round"
        show-action
        background="rgb(200,37,25)"
        label="JD |"
        placeholder=""
        @click="onSearch"
        style="color: #666"
        disabled
      >
        <template #action>
          <div @click="$router.push('/login')" style="color: #fff">
            {{ Logged }}
          </div>
        </template>
        <template #left>
          <div>
            <van-icon name="bars" />
          </div>
        </template>
      </van-search>
    </div>
    <div class="mian" @scroll="scrollMe" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgurl" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="5">
          <van-grid-item
            v-for="item in navList"
            :key="item.navid"
            :icon="item.imgurl"
            :text="item.title"
          />
        </van-grid>
        <div class="top10">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="box">
          <!-- nav区域进行组价之间的数据传递 -->
          <ul class="smbox">
            <li
              v-for="(item, index) in smallpic"
              :key="index"
              @click="todetail(item.proid)"
            >
              <img :src="item.img1" alt="" />
              <p class="boxp">￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <div class="top10">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'seckill' : 'shwo'">
              <li
                v-for="(item, index) in picList"
                :key="index"
                @click="todetail(item.proid)"
              >
                <img :src="item.img1" alt="" />
                <div>
                  <p class="van-multi-ellipsis--l2">{{ item.proname }}</p>
                  <h4>￥{{ item.originprice }}</h4>
                </div>
              </li>
              <div class="btn-icon" @click="btnclick">
                <van-icon name="fire-o" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
      </van-pull-refresh>
      <div class="top11" v-if="scrollTop > 600" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>
<script>
import { set } from "vue";
// import { GETHomData } from "../../request/api";
import myAxios from "../request/mock";
import YouAxios from "../request/requestone";
export default {
  data() {
    return {
      // Logged: "",
      time: 24 * 60 * 60 * 1000,
      bannerList: [],
      navList: [],
      smallpic: [],
      picList: [],
      isShow: true,
      count: 1,
      loading: false,
      finished: false,
      isLoading: false,
      scrollTop: 0,
      timer: null,
    };
  },
  methods: {
    onSearch() {
      this.$router.push("/search");
    },
    onCancel() {
      Toast("取消");
    },
    btnclick() {
      this.isShow = !this.isShow;
    },
    todetail(proid) {
      this.$router.push("/detail/" + proid);
    },
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then((data) => {
          //  加载的第一页
          this.proList = data.data.data;
          this.count = 2;
        });
      }, 1000);
    },
    onLoad() {
      this.loading = true;
      // setTimeout(() => {
      YouAxios.get("/pro/list", {
        params: { count: this.count, limitNum: 6 },
      }).then((data) => {
        // console.log(data.data.data);
        this.loading = false;
        if (data.data.data.length == 0) {
          this.finished = true;
        } else {
          this.picList = [...this.picList, ...data.data.data];
          this.count++;
        }
      });
      // }, 3000)
    },
  },
  computed: {
    Logged: {
      set(val) {
        console.log(val);
        val = localStorage.getItem("token");
      },
      get() {
        if (localStorage.getItem("token")) {
          return "已登录";
        }
        return "登录";
      },
    },
  },
  created() {
    myAxios.get("/navList").then((res) => {
      // console.log(res.data);
      this.navList = res.data;
    });
    // 把参数进行传递
    myAxios.get("/bannerList").then((res) => {
      // console.log(res.data);
      this.bannerList = res.data;
    });
    YouAxios.get("/pro/seckilllist").then((data) => {
      // console.log(data.data.data);
      this.smallpic = data.data.data;
    });
  },
};
</script>
<style >
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}

.van-icon-bars {
  font-size: 25px;
  color: #fff;
  margin-right: 0.1rem;
}

.top10 {
  margin-top: 0.2rem;
  min-height: 0.2rem;
  /* background-color: #fff; */
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.box {
  height: 1rem;
  /* background-color: blue; */
}

.box ul {
  height: 90%;
  display: flex;
  justify-content: space-between;
}

::-webkit-scrollbar {
  display: none;
}

.box .smbox li {
  width: 18%;
  height: auto;
  text-align: center;
  margin-right: 0.3rem;
  /* background-color:#fff; */
}

.box .smbox li .boxp {
  /* height: .2rem; */
  text-align: center;
  color: red;
}

.box .smbox li img {
  height: 80%;
}

.seckill {
  /* flex: 1; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgc(247, 247, 247);
}

.seckill li {
  width: 49%;
  /* background-color: blue; */
  margin-bottom: 0.1rem;
  padding: 0.1rem;
  margin-bottom: 0.1rem;
  background-color: #fff;
}

.seckill li img {
  width: 100%;
}

.btn-icon {
  height: 0.4rem;
  width: 0.4rem;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  border: 3px solid gray;
  border-radius: 50%;
  font-size: 0.3rem;
  /* color: black; */
  background-color: #fff;
  text-align: center;
  line-height: 0.4rem;
}

.shwo {
  flex: 1;
  flex-wrap: wrap;
}

.shwo li {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin-bottom: 0.1rem;
}

.shwo li img {
  width: 33%;
}

.shwo li div {
  flex: 1;
  padding: 0.1rem;
}

.top11 {
  height: 0.4rem;
  width: 0.4rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.4rem;
  background-color: #fff;
}
</style>